<template>
  <div class="inspection-record">
    <!-- 顶部导航栏 -->
    <van-nav-bar
        title="巡检记录"
        left-arrow
        @click-left="onClickLeft"
    />

    <!-- 时间选择 -->
    <van-cell title="巡检时间" :value="selectedDate" @click="showDatePicker = true" />

    <!-- 折叠面板 -->
    <van-collapse v-model="activeNames">
      <!-- 空调巡检计划 -->
      <van-collapse-item title="空调巡检计划" name="1">
        <van-cell
            v-for="item in airConditionerRecords"
            :key="item.date"
            :title="item.date + '空调巡检记录'"
            is-link
            @click="goToDetail(item)"
        />
      </van-collapse-item>

      <!-- 电梯自动巡检计划 -->
      <van-collapse-item title="电梯自动巡检计划" name="2">
        <van-cell
            v-for="item in elevatorRecords"
            :key="item.date"
            :title="item.date + '电梯自动巡检记录'"
            is-link
            @click="goToDetail(item)"
        />
      </van-collapse-item>

      <!-- 门禁巡检计划 -->
      <van-collapse-item title="门禁巡检计划" name="3">
      </van-collapse-item>
    </van-collapse>

    <!-- 日期选择器弹窗 -->
    <van-popup v-model="showDatePicker" position="bottom">
      <van-datetime-picker
          type="date"
          :value="currentDate"
          @confirm="onDateConfirm"
          @cancel="showDatePicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'XunjianjiluView',
  data() {
    return {
      activeNames: ['1'],
      showDatePicker: false,
      currentDate: new Date(),
      selectedDate: '年/月/日',
      airConditionerRecords: [
        { date: '20230923' },
        { date: '20230924' },
        { date: '20230925' },
        { date: '20230926' },
        { date: '20230927' }
      ],
      elevatorRecords: [
        { date: '20230925' },
        { date: '20230926' },
        { date: '20230927' }
      ]
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back()
    },
    onDateConfirm(date) {
      this.selectedDate = this.formatDate(date)
      this.showDatePicker = false
    },
    formatDate(date) {
      const d = new Date(date)
      return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()}`
    },
    goToDetail(item) {
      // 跳转到详情页面
      this.$router.push({
        path: '/inspection-detail',
        query: { date: item.date }
      })
    }
  }
}
</script>

<style scoped>
.inspection-record {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.van-cell {
  align-items: center;
}

.van-collapse-item__content {
  padding: 0;
}
</style>